<template>
	<section class="content">
		<topHeader></topHeader>
		<div class="noticeBox">
			<div class="noticeBoxLeft">
				<img src="../assets/img/laba.png" alt="">
				<p>{{$t('newList.title137')}}</p>
			</div>
			<van-notice-bar left-icon="" @click="openMsg" :text="str_tongshi" color="#fff" class="tongzhi" />
			<!-- 图标：volume-o -->
		</div>
		<!-- <navbar :title="$t('h_title.baobiao_cunkuang')" :right_show="false" :type="2" :left_text="$t('h_title.shouye')"
			ref="navbar"></navbar> -->
		<!-- <div class="topsadbOX">
			<router-link to="/index">
				<div class="LOGObOX">
					<img :src="this.$https.baseUrl + setting.site_logo" alt="">
				</div>
			</router-link>
			<div class="rightBoxss">
				<div class="nameBoxs">
					{{user.name}}
				</div>
				<div class="leftsad">
					{{user.money}}
				</div>
				<router-link to="/recharge">
					<div class="chongzhibOX">
						<img src="../assets/images/d.png" alt="">
						<p>
							{{$t('index.top[4]')}}<br />DEPOSIT
						</p>
					</div>
				</router-link>
			</div>
		</div> 
		<div class="jiaoyilishiBox">
			{{$t('newList.title113')}}
		</div>-->
		<!-- <div class="shurukuangBox">
			<div class="item">
				<p>{{$t('newList.title114')}}</p>
				<select v-model="type" style="width: 200px;background: none;border:none;color:#fff;padding-left: 10px;">
					<option value="1" selected class="blue">{{$t('newList.title115')}}</option>
					<option class="blue" value="2">{{$t('newList.title116')}}</option>
					<option class="blue" value="3">{{$t('newList.title117')}}</option>
					<option class="blue" value="4">{{$t('newList.title118')}}</option>
					<option class="blue" value="5">{{$t('newList.title119')}}</option>
				</select>
			</div>
			<div class="item">
				<p>{{$t('newList.title120')}}开始日期</p>
				<input v-model="startDate" type="datetime-local" :placeholder="$t('newList.title121')">
			</div>
			<div class="item">
				<p>{{$t('newList.title122')}}</p>
				<input v-model="endDate" type="datetime-local" :placeholder="$t('newList.title123')">
			</div>
		</div>
		<div class="buttBoxss" @click="fun_submit">
			{{$t('newList.title124')}}
		</div>
		<div class="fromBoxds">
			<div class="biaotouBox">
				<div class="item itemTow">
					{{$t('newList.title125')}}
				</div>
				<div class="item">
					{{$t('newList.title126')}}
				</div>
				<div class="item">
					{{$t('newList.title127')}}
				</div>
				<div class="item itemTow">
					{{$t('newList.title128')}}
				</div>
			</div>
			<div class="neirongBox" v-for="item in list">
				<div class="item itemTow">
					{{item.created_at}}
				</div>
				<div class="item">
					<p v-if="showTypeone||showTypetow">{{$t('common.baobiao_status['+item.status+']')}}</p>
					<p v-if="showTypethree||showTypefour||showTypefive">{{$t('newList.title129')}}</p>
				</div>
				<div class="item">
					<p v-if="showTypeone">{{$t('newList.title115')}}</p>
					<p v-if="showTypetow">{{$t('newList.title116')}}</p>
					<p v-if="showTypethree">{{$t('newList.title117')}}</p>
					<p v-if="showTypefour">{{$t('newList.title118')}}</p>
					<p v-if="showTypefive">{{$t('newList.title119')}}</p>
				</div>
				<div class="item itemTow" v-if="!showTypethree">
					{{item.money}}
				</div>
				<div class="item itemTow" v-if="showTypethree">
					{{item.netAmount}}
				</div>
			</div>
			<div style="font-size: 14px;color: #fff;margin-top: 10px;" v-if="zongjine">
				{{$t('zongjine')}}{{zongjine}}
				<font style="margin-left:20px;" v-if="yingkui">{{$t('dailizhongxin.huiyuanshuying')}}{{yingkui}}</font>
			</div>

		</div>
		<div class="dfdsPage">
			{{$t('newList.title131')}}{{currentPage}}{{$t('newList.title132')}}{{list.length}}{{$t('newList.title133')}}{{totalpage}}{{$t('newList.title134')}}
		</div>
		<div class="sajkgPage">
			<div class="buttasd" @click="getPage(0)">
				{{$t('newList.title135')}}
			</div>
			<div class="yemabox">
				{{currentPage}}
			</div>
			<div class="buttasd" @click="getPage(1)">
				{{$t('newList.title136')}}
			</div>
		</div> -->
		<van-popup v-model="show" class="iframe_alert">
			<div class="baobiaoBox">
				<div class="baobiaoBoxTop">
					<p>{{$t('h_title.baobiao_cunkuang')}}</p>
					<img src="../assets/img/guanbi.png" alt="" @click="guanbiBox">
				</div>
				<div class="baobiaoBoxCon">
					<div class="danxuanBox">
						<!-- <van-radio-group v-model="checked" @change="changeFn">
							<van-radio name="1" @click="clickFn">单选框 1</van-radio>
							<van-radio name="2" @click="clickFn">单选框 2</van-radio>
						</van-radio-group> -->
					</div>
					<div class="shijianBox">
						<input v-model="startDate" type="datetime-local" :placeholder="$t('newList.title121')">
						<input v-model="endDate" type="datetime-local" :placeholder="$t('newList.title123')">
					</div>
					<div class="xialaBox">
						<p>{{$t('newList.title114')}}</p>
						<select v-model="type"
							style="width:100%;background: none;border:1px solid #ccc;color:#555;padding-left: 10px;height: 33px;border-radius: 5px;">
							<option value="1" selected class="blue">{{$t('newList.title115')}}</option>
							<option class="blue" value="2">{{$t('newList.title116')}}</option>
							<option class="blue" value="3">{{$t('newList.title117')}}</option>
							<option class="blue" value="4">{{$t('newList.title118')}}</option>
							<option class="blue" value="5">{{$t('newList.title119')}}</option>
						</select>
					</div>
					<div class="duoxuanBox">
						<!-- <checkbox>选择时间线</checkbox> -->
					</div>
					<div class="buttonBox" @click="fun_submit">
						{{$t('newNoForm.title4')}}
					</div>
					<div class="fromBoxds">
						<div class="biaotouBox">
							<div class="item itemTow">
								{{$t('newList.title125')}}
							</div>
							<div class="item">
								{{$t('newList.title126')}}
							</div>
							<div class="item">
								{{$t('newList.title127')}}
							</div>
							<div class="item itemTow">
								{{$t('newList.title128')}}
							</div>
						</div>
						<div class="neirongBox" v-for="item in list">
							<div class="item itemTow">
								{{item.created_at}}
							</div>
							<div class="item">
								<p v-if="showTypeone||showTypetow">{{$t('common.baobiao_status['+item.status+']')}}</p>
								<p v-if="showTypethree||showTypefour||showTypefive">{{$t('newList.title129')}}</p>
							</div>
							<div class="item">
								<p v-if="showTypeone">{{$t('newList.title115')}}</p>
								<p v-if="showTypetow">{{$t('newList.title116')}}</p>
								<p v-if="showTypethree">{{$t('newList.title117')}}</p>
								<p v-if="showTypefour">{{$t('newList.title118')}}</p>
								<p v-if="showTypefive">{{$t('newList.title119')}}</p>
							</div>
							<div class="item itemTow" v-if="!showTypethree">
								{{item.money}}
							</div>
							<div class="item itemTow" v-if="showTypethree">
								{{item.netAmount}}
							</div>
						</div>
						<div style="font-size: 14px;color: #333;margin-top: 10px;" v-if="zongjine">
							{{$t('zongjine')}}{{zongjine}}
							<font style="margin-left:20px;" v-if="yingkui">
								{{$t('dailizhongxin.huiyuanshuying')}}{{yingkui}}</font>
						</div>

					</div>
					<div class="dfdsPage">
						{{$t('newList.title131')}}{{currentPage}}{{$t('newList.title132')}}{{list.length}}{{$t('newList.title133')}}{{totalpage}}{{$t('newList.title134')}}
					</div>
					<div class="sajkgPage">
						<div class="buttasd" @click="getPage(0)">
							{{$t('newList.title135')}}
						</div>
						<div class="yemabox">
							{{currentPage}}
						</div>
						<div class="buttasd" @click="getPage(1)">
							{{$t('newList.title136')}}
						</div>
					</div>

					<!-- <div class="formList" v-for="item in list">
						<div class="formListIt">
							<div class="formListItTow">
								{{$t('newList.title125')}}
							</div>
							<div class="formListItTow">
								{{item.created_at}}
							</div>
						</div>
						<div class="formListIt">
							<div class="formListItTow">
								{{$t('newList.title127')}}
							</div>
							<div class="formListItTow">
								<p v-if="showTypeone">{{$t('newList.title115')}}</p>
								<p v-if="showTypetow">{{$t('newList.title116')}}</p>
								<p v-if="showTypethree">{{$t('newList.title117')}}</p>
								<p v-if="showTypefour">{{$t('newList.title118')}}</p>
								<p v-if="showTypefive">{{$t('newList.title119')}}</p>
							</div>
						</div>
						<div class="formListIt">
							<div class="formListItTow">
								{{$t('newList.title128')}}
							</div>
							<div class="formListItTow" v-if="!showTypethree">
								{{item.money}}
							</div>
							<div class="formListItTow" v-if="showTypethree">
								{{item.netAmount}}
							</div>
						</div>
						<div class="formListIt">
							<div class="formListItTow">
								{{$t('newNoForm.title4')}}
							</div>
							<div class="formListItTow">
								{{$t('newNoForm.title6')}}{{list.length}}
								{{$t('newNoForm.title7')}}
							</div>
						</div>
					</div>
					<div class="textBox">
						可用
					</div> -->
				</div>
			</div>
		</van-popup>
		<!-- <jilvTop @fun_tian="fun_tian"></jilvTop>
        <section class="jilv-cont">
            <h5 v-if="list.length <= 0">{{$t('common.zanwujilv')}}</h5>
            <section id="jilv-content" v-else>
                <h6>{{$t('jilv.zongchenggongtixian')}}:<span>$ {{total}}</span></h6>
                <section class="jilv-content">
                    <article class="top">
                        <span>{{$t('jilv.cunkuan_tab[0]')}}</span>
                        <span>{{$t('jilv.cunkuan_tab[1]')}}</span>
                        <span>{{$t('jilv.cunkuan_tab[2]')}}</span>
                    </article>
                    <article v-for="item in list">
                        <span>+{{item.money}}元</span>
                        <span :class="item.status == '3'?'error':''">{{$t('common.baobiao_status['+item.status+']')}}</span>
                        <span>{{item.created_at}}</span>
                    </article>

                </section>
                <van-pagination
                        v-model="currentPage"
                        :page-count = pageCount
                        :show-page-size="5"
                        force-ellipses
                        @change="fun_change"
                />
            </section>
        </section> -->
		<bottom></bottom>
	</section>
</template>

<script>
	import navbar from "@/components/navbar"
	import jilvTop from "@/components/jilv-top"
	import topHeader from "@/components/topHeader"
	import vueSeamlessScroll from 'vue-seamless-scroll'
	import Bottom from "@/components/bottom"
	import {
		Pagination,
		NoticeBar,
		RadioGroup
	} from 'vant'
	export default {
		name: "baobiao_cunkuang",
		components: {
			navbar,
			jilvTop,
			topHeader,
			Bottom,
			[Pagination.name]: Pagination,
			[RadioGroup.name]: RadioGroup,
			vueSeamlessScroll,
			[NoticeBar.name]: NoticeBar,
		},
		data() {
			return {
				currentPage: 1, //当前页
				pageCount: 1, //总页
				tianshu: 1,
				list: [],
				day: 1,
				total: 0,
				totalpage: 0,
				user: {},
				setting: {},
				startDate: "",
				endDate: "",
				type: "1",
				showTypeone: true,
				showTypetow: false,
				showTypethree: false,
				showTypefour: false,
				showTypefive: false,
				zongjine: 0,
				yingkui: 0,
				str_tongshi: '',
				show: true,
				checked: '1',
				checkRadioFlag: false
			}
		},
		mounted() {
			this.onLoad()
			this.$https.fetchGet('/m/personal', {}).then(res => {
				console.log(res.data);
				this.user = res.data.member
				this.setting = res.data.setting
			})
		},
		methods: {
			fun_tian(int) {
				this.day = int
				this.onLoad()
			},
			guanbiBox() {
				this.show = false
				this.$router.back()
			},
			fun_change() { //点击分页
				this.showTypeone = false;
				this.showTypetow = false;
				this.showTypethree = false;
				this.showTypefour = false;
				this.showTypefive = false;
				if (this.type == 1) {
					this.onLoad();
					this.showTypeone = true;
				} else if (this.type == 2) {
					this.onLoadTow()
					this.showTypetow = true;
				} else if (this.type == 3) {
					this.onLoadThree()
					this.showTypethree = true;
				} else if (this.type == 4) {
					this.onLoadFour()
					this.showTypefour = true;
				} else if (this.type == 5) {
					this.onLoadFive()
					this.showTypefive = true;
				}
			},
			getPage(num) {
				if (num == 0 && this.currentPage != 1) {
					this.currentPage--
					this.showTypeone = false;
					this.showTypetow = false;
					this.showTypethree = false;
					this.showTypefour = false;
					this.showTypefive = false;
					if (this.type == 1) {
						this.onLoad();
						this.showTypeone = true;
					} else if (this.type == 2) {
						this.onLoadTow()
						this.showTypetow = true;
					} else if (this.type == 3) {
						this.onLoadThree()
						this.showTypethree = true;
					} else if (this.type == 4) {
						this.onLoadFour()
						this.showTypefour = true;
					} else if (this.type == 5) {
						this.onLoadFive()
						this.showTypefive = true;
					}
				} else if (num == 1 && this.currentPage != this.pageCount) {
					this.currentPage++
					this.showTypeone = false;
					this.showTypetow = false;
					this.showTypethree = false;
					this.showTypefour = false;
					this.showTypefive = false;
					if (this.type == 1) {
						this.onLoad();
						this.showTypeone = true;
					} else if (this.type == 2) {
						this.onLoadTow()
						this.showTypetow = true;
					} else if (this.type == 3) {
						this.onLoadThree()
						this.showTypethree = true;
					} else if (this.type == 4) {
						this.onLoadFour()
						this.showTypefour = true;
					} else if (this.type == 5) {
						this.onLoadFive()
						this.showTypefive = true;
					}
				}
			},
			fun_submit() {
				// this.day = int
				this.showTypeone = false;
				this.showTypetow = false;
				this.showTypethree = false;
				this.showTypefour = false;
				this.showTypefive = false;
				if (this.type == 1) {
					this.onLoad();
					this.showTypeone = true;
				} else if (this.type == 2) {
					this.onLoadTow()
					this.showTypetow = true;
				} else if (this.type == 3) {
					this.onLoadThree()
					this.showTypethree = true;
				} else if (this.type == 4) {
					this.onLoadFour()
					this.showTypefour = true;
				} else if (this.type == 5) {
					this.onLoadFive()
					this.showTypefive = true;
				}
			},
			onLoad() {
				this.$https.fetchGet('/m/recharge_record', {
					'page': this.currentPage,
					'start_time': this.startDate,
					'end_time': this.endDate,
				}).then(res => {
					let data = res.data.data
					this.list = data.data
					this.total = res.data.total
					this.totalpage = data.total
					this.pageCount = data.last_page
					this.zongjine = res.data.total
					this.yingkui = 0
					this.userinfo();
				})
			},
			userinfo() {
				this.$https.fetchGet('/m/personal', {}).then(res => {
					let data = res.data
					this.str_tongshi = data.system_notices.content + '        線上人數' + parseInt(Math.random() *
						10000, 10)
				})
			},
			onLoadTow() {
				this.$https.fetchGet('/m/drawing_record', {
					'page': this.currentPage,
					'start_time': this.startDate,
					'end_time': this.endDate,
				}).then(res => {
					let data = res.data.data
					this.list = data.data
					this.total = res.data.total
					this.totalpage = data.total
					this.pageCount = data.last_page
					this.zongjine = res.data.total
					this.yingkui = 0
				})
			},
			onLoadThree() {
				this.$https.fetchGet('/m/game_record', {
					'page': this.currentPage,
					'start_time': this.startDate,
					'end_time': this.endDate,
				}).then(res => {
					let data = res.data.data
					this.list = data.data
					this.total = res.data.total
					this.totalpage = data.total
					this.pageCount = data.last_page
					this.zongjine = res.data.total
					this.yingkui = res.data.win
				})
			},
			onLoadFour() {
				this.$https.fetchGet('/m/user_fsjl', {
					'page': this.currentPage,
					'start_time': this.startDate,
					'end_time': this.endDate,
				}).then(res => {
					let data = res.data.data
					this.list = data.data
					this.total = res.data.total
					this.totalpage = data.total
					this.pageCount = data.last_page
					this.zongjine = res.data.total
					this.yingkui = 0
				})
			},
			onLoadFive() {
				this.$https.fetchGet('/m/transfer_record', {
					'page': this.currentPage,
					'start_time': this.startDate,
					'end_time': this.endDate,
				}).then(res => {
					let data = res.data.data
					this.list = data.data
					this.total = res.data.total
					this.totalpage = data.total
					this.pageCount = data.last_page
					this.zongjine = res.data.total
					this.yingkui = 0
				})
			},
			clickFn() {
				if (!this.checkRadioFlag) {
					this.checked = '';
				}
				this.checkRadioFlag = false;
			},
			changeFn() {
				this.checkRadioFlag = true;
			},
			openMsg() {
				this.$router.push('/msg')
			},
		}
	}
</script>

<style scoped lang="less">
	.blue {
		color: #333;
	}

	input[type='date'] {
		position: relative;
	}

	input[type='date']::-webkit-calendar-picker-indicator {
		position: absolute;
		right: 0;
		padding-left: calc(100% - 40px);
		/*padding-right: 5px;*/
	}

	.topsadbOX {
		width: 100%;
		height: 250px;
		background-image: url('../assets/images/a.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		padding: 10px 10px 0px 10px;
		box-sizing: border-box;
		justify-content: space-between;

		.LOGObOX {
			img {
				width: 70px;
				height: 30px;
			}
		}

		.rightBoxss {
			display: flex;

			.nameBoxs {
				min-width: 60px;
				height: 24px;
				line-height: 24px;
				border-radius: 3px;
				background: linear-gradient(#f5d64c, #f5bb19);
				font-size: 10px;
				font-weight: 600;
				color: #333;
			}

			.leftsad {
				width: 65px;
				height: 24px;
				line-height: 24px;
				color: #fff;
				padding-left: 15px;
				padding-top: 2px;
				font-size: 12px;
				margin: 0px 5px;
				border-radius: 0px 5px 5px 0px;
				background-image: url('../assets/images/yue.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.chongzhibOX {
				width: 90px;
				height: 24px;
				justify-content: center;
				border-radius: 3px;
				background: linear-gradient(#f5d64c, #f5bb19);
				font-size: 6px !important;
				font-weight: 600;
				display: flex;
				align-items: center;
				color: #333;

				img {
					width: 16px;
					height: 18px;
				}
			}
		}
	}

	.jiaoyilishiBox {
		width: 200px;
		font-size: 15px;
		font-weight: 600;
		background-image: url('../assets/images/b.png');
		height: 30px;
		line-height: 30px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		text-align: left;
		padding-left: 50px;
		position: absolute;
		top: 200px;
	}

	.shurukuangBox {
		width: 80%;
		margin: 20px auto 0;

		.item {
			display: flex;
			align-items: center;
			height: 35px;
			border: 1px solid #fcc027;
			border-radius: 5px;
			margin-bottom: 10px;

			p {
				width: 80px;
				text-align: center;
				background-color: #fcc027;
				color: #000;
				height: 35px;
				font-size: 15px;
				border-radius: 5px 0px 0px 5px;
				line-height: 35px;
			}

			input {
				width: 60%;
				color: #fff;
				padding-left: 10px;
				height: 33px;
				background: none;
				font-size: 14px;
				border: 0px;
			}
		}
	}

	.buttBoxss {
		width: 130px;
		height: 30px;
		color: #fff;
		font-size: 15px;
		line-height: 30px;
		margin: 0px auto;
		background: linear-gradient(#770c17, #441418);
		border-radius: 3px;
	}

	.fromBoxds {
		width: 100%;
		margin: 20px auto 0px;

		.biaotouBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
		border: 1px solid #ccc;
			.item {
				width: 25%;
				height: 24px;
				line-height: 24px;
				// border-radius: 3px;
				border-right: 1px solid #ccc;
				// background: linear-gradient(#f5d64c, #f5bb19);
				font-size: 12px;
				color: #333;
			}

			.item:last-child {
				border-right: 0;
			}

			.itemTow {
				width: 28%;
			}
		}

		.neirongBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
		border: 1px solid #ccc;
		border-top: 0;
			.item {
				// margin-top: 4px;
				width: 25%;
				height: 30px;
				line-height: 30px;
				border-right: 1px solid #ccc;
				// border-radius: 3px;
				// background: linear-gradient(#770c17, #441418);
				font-size: 12px;
				color: #333;
				overflow: hidden;
			}

			.item:last-child {
				border-right: 0;
			}

			.itemTow {
				width: 28%;
			}
		}
	}

	.dfdsPage {
		font-size: 12px;
		color: #333;
		margin-top: 20px;
	}

	.sajkgPage {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10px;

		.buttasd {
			font-size: 12px;
			color: #333;
			cursor: pointer;
		}

		.yemabox {
			width: 23px;
			height: 23px;
			background-color: #fcc027;
			color: #333;
			font-size: 12px;
			border-radius: 50%;
			text-align: center;
			line-height: 23px;
			margin: 0px 20px;
		}
	}




	.jilv-cont {
		padding-top: 2.3rem;
		color: #fff;
		background-color: #eee;
		height: calc(100vh - 1.2rem);

		h5 {
			font-size: .36rem;
			padding: .4rem;
			color: #5d5353;
			font-weight: normal;
		}

		#jilv-content {
			background-color: #fff;
			color: #636b6f;
			text-align: left;
			padding-bottom: .1rem;

			h6 {
				font-weight: normal;
				padding: .2rem .5rem;
				font-size: .4rem;
				border-bottom: 1px solid #E5E5E5;

				span {
					color: #140BF8;
					font-size: .7rem;
					position: relative;
					top: .1rem;
					margin-left: .3rem;
				}
			}

			.jilv-content {
				article {
					font-size: .36rem;
					display: flex;
					align-items: center;
					text-align: center;
					margin-bottom: .3rem;

					&.top {
						line-height: .9rem;

						span:nth-child(2) {
							color: #636b6f;
						}
					}

					span {
						&:nth-child(1) {
							width: 30%;
						}

						&:nth-child(2) {
							width: 40%;
							color: #20a53a;
						}

						&:nth-child(3) {
							width: 30%;
						}
					}
				}
			}
		}
	}

	.noticeBox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 4px;
		box-sizing: border-box;

		.noticeBoxLeft {
			width: 17%;
			display: flex;
			align-items: center;

			img {
				width: 25px;
				height: 16px;
			}

			p {
				font-size: 12px;
				color: #ffc93e;
			}
		}

		.tongzhi {
			width: 83%;
			background-color: #222222;
			color: #fff;
			font-size: 12px;
			height: 30px;
			padding: 0px 0px;
			box-sizing: border-box;
		}
	}

	.iframe_alert {
		width: 94%;
		background-color: #ffffff;
		margin: 20px auto 0;
		border-radius: 0.2rem;
		height: 90vh;

		.baobiaoBox {
			width: 100%;

			.baobiaoBoxTop {
				width: 100%;
				position: relative;
				text-align: center;
				font-size: 18px;
				font-weight: 600;
				padding: 10px 0px 25px;
				background-color: #212529;
				color: #fff;

				img {
					width: 25px;
					height: 25px;
					position: absolute;
					top: 10px;
					right: 10px;
				}
			}

			.baobiaoBoxCon {
				width: 100%;
				padding: 10px;
				box-sizing: border-box;

				.danxuanBox {
					display: flex;
					align-items: center;
					font-size: 15px;
					color: #333;
				}

				.shijianBox {
					input {
						width: 100%;
						color: #555;
						padding: 0 10px;
						height: 33px;
						background: none;
						font-size: 14px;
						border: 1px solid #ccc;
						border-radius: 5px;
						margin-top: 10px;
					}
				}

				.xialaBox {
					width: 100%;
					color: #000;
					font-size: 15px;
					text-align: left;
					font-weight: 600;

					p {
						margin: 5px 0;
					}
				}

				.duoxuanBox {
					display: flex;
					align-items: center;
					font-size: 15px;
					color: #333;
					text-align: left;
				}

				.buttonBox {
					width: 80px;
					height: 35px;
					line-height: 35px;
					color: #fff;
					font-size: 15px;
					background-color: #f49623;
					border-radius: 5px;
					margin: 20px auto;
				}

				.formList {
					width: 100%;
					border: 1px solid #ccc;
					border-bottom: 0;

					.formListIt {
						width: 100%;
						display: flex;
						align-items: center;
						border-bottom: 1px solid #ccc;

						.formListItTow {
							width: 50%;
							font-size: 15px;
							color: #000;
							font-weight: 500;
							text-align: left;
							padding: 8px 0px 8px 5px;
						}

						.formListItTow:last-child {
							color: #333;
							font-weight: 400;
							border-left: 1px solid #ccc;
						}
					}
				}

				.textBox {
					width: 100%;
					margin: 25px auto 0;
					font-size: 15px;
					color: #000;
				}
			}
		}
	}
</style>